<template>
  <div class="container">
    <svg viewBox="0 0 1000 300">
      <symbol id="line-text">
        <text text-anchor="middle" x="50%" y="50%" dy="0.4em">
          Mind Hunter
        </text>
      </symbol>
      <use xlink:href="#line-text" class="text"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>
.container {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top:0;
  background-image: url("../../../static/home.png");
  background-size: cover;

  font-size: 120px;
  font-weight: bolder;
  text-transform: uppercase;
}
svg{
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
}
.text{
  fill: cornflowerblue;
  stroke: #EBEEF5;
  stroke-width: 5;
}

</style>
